    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>列表过滤</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <!--
        
        -->
        <div id="app">
        <!-- 遍历数组 -->
        <div>
            <input type="text" v-model="searchText">
            <button @click="sortType=1">年龄升序</button>
            <button @click="sortType=2">年龄降序</button>
            <button @click="sortType=0">原顺序</button>
        </div>
        <!-- <ul>
            <li v-for="(stu,index) in filterList" ::key="stu.id">
                {{stu.Name}}--{{stu.Age}}--{{stu.Sex}}--{{stu.Address}}
            </li>
        </ul> -->

        <ul>
            <li v-for="(stu,index) in cList" ::key="stu.id">
                {{stu.Name}}--{{stu.Age}}--{{stu.Sex}}--{{stu.Address}}
            </li>
        </ul>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list:[
                    {id:1,Name:"马冬梅",Age:18,Sex:"男",Address:"北京"},
                    {id:2,Name:"周冬雨",Age:19,Sex:"女",Address:"上海"},
                    {id:3,Name:"周杰伦",Age:20,Sex:"男",Address:"广州"},
                    {id:4,Name:"温兆伦",Age:21,Sex:"女",Address:"深圳"},
                    {id:5,Name:"周炳伦",Age:22,Sex:"男",Address:"杭州"}
                ],
                filterList:[],
                searchText:'',
                sortType:0  //1:升序 2:降序 0:原顺序
            },
            methods:{
            
            },
            // watch:{
            //     searchText:{
            //         immediate:true,
            //         handler(val){
            //             console.log(this.list);
            //             this.filterList = this.list.filter((item)=>{
            //                 return item.Name.indexOf(val) != -1
            //             })
            //         }
            //     }
            // },
            computed:{
                cList(){
                    var arr = this.list.filter((item)=>{
                        return item.Name.indexOf(this.searchText) != -1
                    })
                    //0是false 所以只判断 1，2
                    if(this.sortType){
                        arr.sort((a,b)=>{
                        return this.sortType == 1 ? a.Age - b.Age : b.Age - a.Age
                        })
                    }

                    return arr
                }
            }
        })
    </script>
    </html>